<template>
	<div class="wt-model-timeline" v-loading="loading" style="height:100%">
		<el-steps v-if="currentData.length > 0" direction="vertical" :active="progress">
			<el-step 
				v-for="(data, index) in currentData" 
				:key="index" 
				title="title"
				style="padding-bottom: 50px"
			>
				<el-card class="box-card" slot="title">
					<div slot="header"  class="clearfix">
						<span style="line-height: 24px;">{{data.time}} {{data.model.title}} </span>
						<el-button 
							v-if="allowEdit" 
							style="float: right;"
							@click="handleEdit(data.model, data.data)">编辑</el-button>
					</div>
					<wt-model-summary :model="data.model" :value="data.data"></wt-model-summary>
				</el-card>
				<el-row v-if="false" slot="title" :gutter="10">
					<el-col :span="4">{{ data.model.title }}</el-col>
					<el-col :span="20"></el-col>
				</el-row>
			</el-step>
		</el-steps>
		<div v-else>
			该病例没有任何记录<span v-if="allowEdit">，请首先为病例添加入院记录！<el-button type="primary" icon="plus" @click="addAdmission">添加入院记录</el-button></span>
		</div>
	</div>
</template>
<script>
	/**
		病例概要信息
	 */
	import Vue from 'vue'
	import ElementUI from 'element-ui'
	import request from 'winged/utils/axios'
	import FormUtils from 'winged/utils/wt-form-utils'
	import TimeUtils from 'winged/utils/wt-time-utils'
	import ModelUtils from 'winged/utils/wt-model-utils'
	import ModelSummary from './wt-model-summary'
	
	Vue.use(ElementUI);
	Vue.component(ModelSummary.name, ModelSummary);

	export default {
		name: 'wt-model-timeline',
		props: {
			models: {
				type: Array,
				required: true
			},
			paramsData: {
				type: Object,
				default: {}
			},
			config: {
				type: Object,
				required: true
			},
			allowEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currentData: [],
				query: this.config,
				loading: false,
				progress: 1,
			}
		},
		methods: {
			load() {
				let url = this.query.url;
				if (this.query.urlAppendParam) {
					url += this.paramsData[this.query.urlAppendParam];
				}
				let _this = this;
				this.loading = true;
				request(url, this.query.method, {}, this.query.transfer, function(data) {
					_this.loading = false;
					_this.setQueryResult(data);
				}, function(error) {
					_this.loading = false;
					console.error(error);
					_this.$message.error('加载失败');
				})
			},
			getModelByTableName(name) {
				for (let i in this.models) {
					let model = this.models[i];
					if (model.tableName == name) {
						return model;
					}
				}
				return null;
			},
			addAdmission() {
				// this.handleEdit({
				// 	model: this.getModelByTableName('hospitalized'),
				// 	time: null,
				// 	data: null
				// });
				this.handleEdit(this.getModelByTableName('hospitalized'), null);
			},
			handleEdit(model, data) {
				this.$emit('edit', model, data);
			},
			setQueryResult(data) {
				data = FormUtils.parseObject(data);
				let records = data.outline;
				let items = [];
				for (let i in records) {
					let record = records[i];
					let model = this.getModelByTableName(record.name);
					if(!model) {
						console.error('data model unknown', record);
						continue;
					}
					if (model.noSummary) continue;
					items.push({
						model: model,
						time: TimeUtils.format(record.time, 'date'),
						data: record.data
					});
				}
				for (let i in items) {
					ModelUtils.normalizeData(items[i].model, items[i].data);
				}
				this.currentData = items;
				this.progress = items.length;
			}
		}
	}

</script>
<style>
	.wt-model-timeline {
		height: 100%
	}
	.wt-model-timeline .el-step .el-step__head {
		/*width: 5%;*/
	}
	.wt-model-timeline .el-step .el-step__main {
		width: 95%
	}
	.wt-model-timeline .el-step .el-step__title {
		width: 100%;
		line-height: 24px;
	}
	.wt-model-timeline .el-card__header,.el-card__body {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.wt-model-timeline .el-card__body span {
		margin-right: 24px;
		color: #333;
	}
	.wt-model-timeline .el-card__body .wt-summary-images {
		display: inline-block;
		color: #333;
	}
	.el-step:last-child .el-step__main{
		padding-right: 10px;
	}
</style>